<template>
	<div class="row">
		<div class="col-sm-12">
			<div class="panel panel-default">
				<div class="panel-heading">Personal Info</div>
				<div class="panel-body">
					<img src="../../../image/1.jpg" class="img-responsive img-rounded img-thumbnail" alt="me">
					<p class="text-center text-primary">Whmjack</p>
					<address>
						<strong>Shannxi YangLing</strong><br>
						<span class="glyphicon glyphicon-home" title="Address"> <code>陕西省咸阳市杨陵区</code></span>
						<span class="glyphicon glyphicon-home" title="PostalCode"> <kbd>712100</kbd></span><br>
						<span class="glyphicon glyphicon-home" title="Mobile"> 15922267301</span>
						<span class="glyphicon glyphicon-home" title="Email"> 845064182@qq.com</span>
					</address>
				</div>
			</div>
			<div class="panel panel-info">
				<div class="panel-heading">Personal Skill</div>
				<div class="panel-body"></div>
				<div class="row" style="margin: 3px;">
					<div class="col-sm-3 skill">
						<span class="text-muted">HTML5</span>
					</div>
					<div class="col-sm-9">
						<div class="progress">
							<div class="progress-bar progress-bar-striped active" style="width: 85%"></div>
						</div>
					</div>
				</div>	

				<div class="row" style="margin: 3px;">
					<div class="col-sm-3 skill">
						<span class="text-success">.NET</span>
					</div>
					<div class="col-sm-9">
						<div class="progress">
							<div class="progress-bar progress-bar-striped progress-bar-success active" style="width: 75%"></div>
						</div>
					</div>
				</div>

				<div class="row" style="margin: 3px;">
					<div class="col-sm-3 skill">
						<span class="text-info" >CSS3</span>
					</div>
					<div class="col-sm-9">
						<div class="progress">
							<div class="progress-bar progress-bar-striped progress-bar-info active" style="width: 95%"></div>
						</div>
					</div>
				</div>	

				<div class="row" style="margin: 3px;">
					<div class="col-sm-3 skill">
						<span class="text-warning">JQuery</span>
					</div>
					<div class="col-sm-9">
						<div class="progress">
							<div class="progress-bar progress-bar-striped progress-bar-warning active" style="width: 80%"></div>
						</div>
					</div>
				</div>


				<div class="row" style="margin: 3px;">
					<div class="col-sm-3 skill">
						<span class="text-danger">Java</span>
					</div>
					<div class="col-sm-9">
						<div class="progress">
							<div class="progress-bar progress-bar-striped progress-bar-danger active" style="width: 75%"></div>
						</div>
					</div>
				</div>

			</div>
			<div class="panel panel-primary">
				<div class="panel-heading">Contact Me</div>
				<div class="panel-body">
				<form class="form horizontal" action="http://localhost:8080" method="post">
					<div class="form-group">
						<label for="email" class="col-sm-2 container-label">Email</label>
					</div>
					<div class="col-sm-9" style="margin-left: 5px;margin-top: -8px">
						<input type="email" id="email" class="form-control" placeholder="Email" name="Email">
					</div>

					<div class="form-group">
						<label for="name" class="col-sm-2 container-label" style="margin-top: 20px;">Name</label>
					</div>
					<div class="col-sm-9" style="margin-left: 5px;margin-top: 12px">
						<input type="text" id="name" class="form-control" placeholder="name" name="Name">
					</div>

					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10" style="margin-top: 10px;margin-left: 80px;">
							<input type="submit" class="btn btn-primary pull-right" value="send">
						</div>
						<div class="clearfix"></div>
					</div>			
				</form>

				</div>
			</div>	
		</div>


	</div>

</template>

<script>
export default{

}
</script>

<style lang="less" scoped>
.row{
	.panel-body{
		text-align:center;
	}
	.skill{
		text-align:center;
	}
}
</style>